
<link rel="stylesheet" href="../BStyle/Menu/style.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="../BStyle/Menu/underMenu.css" type="text/css" charset="utf-8">
<style>
	body{
    	margin:0px;
        padding:0px;
        font-family:Arial;
        background-color:#f0f0f0;
        background-repeat:no-repeat;
        background-position:center center;
    }
	.background {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: 1;
		text-align: center;
		opacity:0.4;
		filter:alpha(opacity=40);
		z-index: -100;
	}
</style>
<img class="background" alt="" src="http://localhost:8080/bullesDeMantes/Affiche_FestivalBulledemant.jpg" /> 
<div class="navigation" align="center">
	<ul class="menu" id="menu">
		<li><span style="top: -17px; z-index: -1;" class="Accueil"></span><a href="../BView/" class="first">Accueil</a></li>
		<li><span style="top: -17px; z-index: -1;" class="EditeursEtExposant"></span><a class="" href="">Editeurs et Exposant</a></li>
		<li><span style="top: -17px; z-index: -1;" class="InfosPratiques"></span><a class="" href="../BView/InfosPratiques.php">Infos pratiques</a></li>
		<li><span style="top: -17px; z-index: -1;" class="Evenements"></span><a href="../BView/Expositions.php" class="">Evenements</a></li>
		<li><span style="top: -17px; z-index: -1;" class="Partenaires"></span><a href="" class="">Partenaires</a></li>
		<li><span style="top: -17px; z-index: -1;" class="EspaceManga"></span><a href="" class="">Espace manga</a></li>
		<li><span style="top: -17px; z-index: -1;" class="Auteur"></span><a href="" class="">Auteur</a></li>
		<li>
			<span class="last search">
				<form action="search" method="GET" >
					<input placeholder="Rechercher un auteur" />
				</form>
			</span>
		</li>
	</ul>
</div>

<script type="text/javascript" src="../BJavaScript/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
            $(function() {
                var d=1000;
                $('#menu span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
                }
            );
            });
</script>
